<template>
  <div class="w">
    <div class="header">
      <div class="title_left" @click="back">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="title_right">
        <el-input class="title_left_input" v-model="searchInfo.subject"></el-input>
        <el-button class="title_left_button" @click="getOrdersList">搜索</el-button>
      </div>
    </div>
    <div class="info">
      <div class="info_card" v-for="(item, index) in ordersList" :key="index">
        <div class="card_top" @click="goShop(item.shop.id)">
          <div class="top_left">
            <el-image :src="item.shop.shopImage" fit="cover"></el-image>
          </div>
          <div class="top_right">
            <div class="right_title">
              <div class="title_info">
                <span>{{ item.shop.shopName }}</span>
                <i class="iconfont icon-jinrujiantou"></i>
              </div>
              <div class="right_discounts">
                <span>接受预定</span>
                <span>9:30后开始配送</span>
              </div>
              <div class="discounts_sale">
                <span>{{ item.shop.discounts }}</span>
              </div>
            </div>
            <div class="right_title_msg">
              <span v-if="item.orderStatus == 0">待支付</span>
              <span v-if="item.orderStatus == 1">待派送</span>
              <span v-if="item.orderStatus == 2">正在派送</span>
              <span v-if="item.orderStatus == 3">已完成</span>
              <span v-if="item.orderStatus == 4">已取消</span>
              <span v-if="item.orderStatus == 5">已退款</span>
            </div>
          </div>
        </div>
        <div class="card_middle" @click="goOrdersDetails(item)">
          <div class="middle_down">
            <div class="middle_dish" v-for="(it, ind) in item.ordersOrDishDtoList" :key="ind">
              <div class="dish_img">
                <el-image :src="it.dish.dishImage" fit="cover"></el-image>
              </div>
              <div class="dish_title">
                <span>{{ it.dish.dishName }}</span>
              </div>
            </div>
            <div class="middle_up">
              <span>￥{{ item.orderPrice }}</span>
              <span>共{{ item.ordersOrDishDtoList.length }}件</span>
            </div>
          </div>
        </div>
        <div class="card_bottom">
          <el-button style="margin-left: 10px" v-if="item.orderStatus == 3 && item.isRate == 0" @click="goRate(item)">去评价</el-button>
          <el-button style="margin-left: 10px" v-if="item.orderStatus == 0" @click="cancel(item)">取消订单</el-button>
          <el-button style="margin-left: 10px" @click="goPay(item)" v-if="item.orderStatus == 0">去支付</el-button>
          <el-button style="margin-left: 10px" @click="refund(item)" v-if="item.orderStatus == 1">申请退款</el-button>
          <el-button @click="goShop(item.shop.id)">再来一单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qurey: '',
      ordersList: [],
      info: [],
      searchInfo: {
        userId: '',
        subject: '',
      },
    };
  },

  created() {
    this.info = JSON.parse(window.localStorage.getItem('userInfo'));
    this.getOrdersList();
  },

  methods: {
    goRate(info) {
      this.$router.push({ path: '/addRate', query: { shopInfo: info } });
    },
    async cancel(info) {
      info.orderStatus = 4;
      const { data: res } = await this.$http.put('orders/updateOrders', info);
      if (res.code == 1) {
        return this.$message.success('订单已取消');
      } else {
        return this.$message.error('订单取消失败');
      }
    },
    async goPay(info) {
      const url = `http://localhost:8080/school/aliPay/payConfirm?traceNo=${info.orderId}&totalAmount=${info.orderPrice}&subject=${info.shop.shopName}`;
      window.open(url);
    },
    async refund(info) {
      const { data: res } = await this.$http.get(
        `http://localhost:8080/school/aliPay/refund?alipayTraceNo=${info.aliPayId}&totalAmount=${info.orderPrice}&traceNo=${info.orderId}`,
      );
      if (res.code == 1) {
        this.getOrdersList();
        return this.$message.success(res.data);
      } else {
        return this.$message.error('退款失败');
      }
    },
    goOrdersDetails(ordersInfo) {
      this.$router.push({ path: '/ordersDetails', query: { ordersInfo: ordersInfo } });
    },
    goShop(shopId) {
      this.$router.push({ path: '/shop', query: { shopId: shopId } });
    },
    back() {
      this.$router.push('/my');
    },
    async getOrdersList() {
      this.searchInfo.userId = this.info.id;
      const { data: res } = await this.$http.get('orders/getAllOrders', { params: this.searchInfo });
      if (res.code == 1) {
        this.ordersList = res.data;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  .header {
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9dc50;
    .title_left {
      margin-left: 15px;
      .icon-fanhui {
        font-size: 25px;
      }
    }

    .title_right {
      margin-left: 15px;
      display: flex;
      width: 320px;
      background-color: #ffffff;
      border-radius: 50px;
      align-items: center;
      margin-right: 15px;
      .title_left_input {
        :deep(.el-input__inner) {
          border-radius: 50px;
          border: none;
        }
      }
      .el-button,
      .el-button.is-round {
        padding: 7px 15px;
      }
      .title_left_button {
        border-radius: 50px;
        margin-right: 5px;
        height: 30px;
        width: 60px;
        background-color: #f9dc50;
        font-size: 15px;
      }
    }
  }
  .info::-webkit-scrollbar {
    display: none;
  }
  .info {
    padding: 10px;
    background-color: #f4f4f5;
    height: calc(100vh - 110px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: auto;
    .info_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 10px;
      .card_top {
        display: flex;
        .top_left {
          margin-right: 10px;
          :deep(.el-image) {
            height: 50px;
            width: 50px;
            border-radius: 10px;
          }
        }
        .top_right {
          display: flex;
          justify-content: space-between;
          flex: 1;
          .right_title {
            .title_info {
              font-size: 17px;
              font-weight: bold;
              letter-spacing: 2px;
              margin-bottom: 5px;
            }
            .right_discounts {
              margin-bottom: 10px;
              span:nth-child(1) {
                border-top: 1px solid #5fa8f5;
                border-left: 1px solid #5fa8f5;
                border-bottom: 1px solid #5fa8f5;
                font-size: 12px;
                color: #fefefe;
                background-color: #57a3f4;
                padding: 0px 5px 2px 5px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
              }
              span:nth-child(2) {
                border-top: 1px solid #5fa8f5;
                border-right: 1px solid #5fa8f5;
                border-bottom: 1px solid #5fa8f5;
                background-color: #fefefe;
                color: #57a3f4;
                font-size: 12px;
                padding: 0px 5px 2px 5px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
              }
            }
            .discounts_sale {
              color: #e03339;
              border: 1px solid #d0adb4;
              border-radius: 5px;
              padding: 0px 5px 2px 5px;
              margin-bottom: 15px;
              width: 32px;
              font-size: 12px;
            }
          }
        }
      }
      .card_middle {
        position: relative;
        .middle_down::-webkit-scrollbar {
          display: none;
        }
        .middle_down {
          width: 100%;
          overflow: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
          display: flex;
          .middle_dish {
            margin-right: 10px;
            width: 110px;
            .dish_img {
              margin-bottom: 3px;
              :deep(.el-image) {
                height: 80px;
                width: 110px;
                border-radius: 10px;
              }
            }
            .dish_title {
              font-size: 17px;
              -webkit-line-clamp: 1;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .middle_up {
          position: absolute;
          top: 0px;
          right: 0px;
          height: 100%;
          text-align: center;
          background-color: rgba(255, 255, 255, 0.5);
          span:nth-child(1) {
            display: block;
            color: #000000;
            font-weight: bold;
            margin-top: 25px;
          }
          span:nth-child(2) {
            color: #5b5c5d;
            font-size: 13px;
            margin-left: 3px;
          }
        }
      }
      .card_bottom {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 25px;
        margin-bottom: 10px;
        :deep(.el-button) {
          padding: 5px 5px;
        }
      }
    }
  }
}
</style>